<template>
	<div style="margin-top: 40px;width: 1200px;">
		<div class="row">
			<div class="grid_wai">
				<div class="grid-content ">
					<a>{{index_list.allNumber}}</a>
					<span>全部</span>
				</div>
				<div style="border-right: 1px solid  #dcdcdc;height: 50px;margin-top: 10px;">
					
				</div>
				<div class="grid-content ">
					<a>{{index_list.praiseNumber}}</a>
					<span>待评价</span>
				</div>
				<div style="border-right: 1px solid  #dcdcdc;height: 50px;margin-top: 10px;">
					
				</div>
				<!-- <div class="grid-content ">
					<a>{{index_list.orderFinish}}</a>
					<span>已完成</span>
				</div>
				<div style="border-right: 1px solid  #dcdcdc;height: 50px;margin-top: 10px;">
					
				</div> -->
				<div class="grid-content ">
					<a>{{index_list.refundNumber}}</a>
					<span>退款/售后</span>
				</div>
			</div>
			<div class="grid_wai2">
				<div class="grid-content ">
					<a>{{index_list.todayNumber}}</a>
					<span style="width: 90px;">今日订单</span>
				</div>
			</div>
		
		</div>
		<!--  -->

		<div class="row" style="margin-top: 20px;">
			<div style="width: 50%;">
				<div class="good-data-wai">
					<el-card class="box-card" shadow="never">
					  <div style="font-size: 18px;margin-bottom: 15px;">
					    <span >商品管理</span>
					  </div>
					<div class="row" style="padding-bottom: 20px;">
						<div class="good-data">
							<div class="grid-content">
								<a>{{index_list.saleNumber}}</a>
								<span>出售中</span>
							</div>
					
							<div class="grid-content">
								<a>{{index_list.downNumber}}</a>
								<span>已下架</span>
							</div>
							<!-- 	<div class="good-data2">
								<a>5</a>
								<span>仓库中</span>
							</div> -->
							<div class="grid-content" @click="jump()">
								<i class="el-icon-plus" style="font-size: 20px;margin-bottom: 13px;margin-top: 9px;display: block;"></i>
								<span >发布新商品</span>
							</div>
						</div>
					</div>
					</el-card>
				</div>
				<div style="padding: 20px 0;min-height: 300px;">
					<el-card class="box-card" style="height: 350px;">
					  <div >
					    <span style="font-size: 18px;margin-bottom: 4px;">官方公告</span>
					  </div>
					<div class="font-16"  v-for="item in notice_list.dtos">
						<div style="margin-top: 15px;padding-bottom: 10px;" @click="get_notice_list(item)">
							<img style="vertical-align: middle;" src="../../../static/images/icon_msgInfo.png" alt="">
							<span style="vertical-align: middle;color: #8A8A8A;">{{item.noticeTitle}}</span>
						</div>
					
					</div>
					<div>
						<el-pagination style="text-align:right;margin-top: 5px;"   background @current-change="handleCurrentChange" :current-page.sync="pageNum"
						 :page-size="5" layout="total, prev, pager, next" :total="notice_list.count">
						</el-pagination>
					</div>
					</el-card>
					
				</div>

			</div>
			<div class="newIndexPicture">
				<el-card class="box-card" style="margin-left: 20px;width:100%;">
				  <div style="font-size: 18px;margin-bottom: 20px;">
				    <span >广告推广</span>
				  </div>
					<div style="height:200px;text-align: center;">
						<img style="height:200px;width: 100%;" src="../../../static/images/banner1.png"/>
					</div>
				</el-card>
				<el-card class="box-card" style="margin-left: 20px;width:100%;margin-top: 10px;">
					<div style="height:200px;text-align: center;">
						<img style="height:200px;width: 100%;" src="../../../static/images/banner2.png"/>
					</div>
				</el-card>
			</div>
		</div>
		<div class="tan_bg" v-show="tankuang"></div>
		<div v-show="tankuang" style="width: 85%;min-height: 90%;background: white;position: fixed;z-index: 2;left: 7%;top: 5%;">
		<i class="el-icon-close" style="font-size: 32px;position: absolute;right: 30px;top: 20px;" @click="close_click"></i>
           <div style="font-weight: bold;font-size: 28px;text-align: center;margin-top: 15px;">{{notice_xq.noticeTitle}}</div>
		   <div style=" font-size: 20px;text-align: center;color: #C0C0C0;">{{notice_xq.updTime}}</div>
		   	<div id="content" style="padding: 30px;text-align: center;"></div>
		</div>
	</div>
</template>
<style>
	
	.good-data a :hover {
		color: firebrick;
	}

	.grid_wai {
		width: 65%;
		height: 140px;
		display: flex;
		background-color: #FFFFFF;
		align-items: center;
		justify-content: space-around;
	}

	.grid_wai2 {
		margin-left: 20px;
		width: 20%;
		height: 140px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #FFFFFF;
	}

	.good-data-wai {
		width: 100%;
		/* height: 180px; */
	}

	.good-data {
		
		display: flex;
		width: 100%;
		justify-content: space-around;
		align-items: center;
	}

	.good-data2 {
		text-align: center;
		margin-left: 50px;
		margin-right: 50px;
	}

	.good-data2 a {
		font-size: 38px;
		display: block;
	}


	.good-data2 span {
		font-size: 20px;
		display: block;
	}

	.grid-content {
		text-align: center;
/* 		margin-left: 30px;
		margin-right: 30px; */
	}

	.grid-content a {
		font-size: 25px;
		color: #222222;
		display: block;
	}

	.grid-content span {
		font-size: 16px;
		display: block;
		font-weight: 500
	}
	.newIndexPicture{
		width: 35%;
	}
	.newIndexPicture .el-card__body{
		padding: 20px;
	}
	.box-card .el-card__heade{
		border-bottom: 1px solid #dcdcdc;
	}

</style>
<script>
	// $(document).ready(function(){
	 
	//   $("#content").click(function(){
	  
	//   });
	 
	// });
 
</script>
<script>
	export default {
		data() {
			return {
				index_list: [],
				pageNum: 1,
				count: 10,
				notice_list: [],
				notice_xq: [],
				tankuang: false,
			}
		},
		created() {
			this.storeId = JSON.parse(sessionStorage.getItem('permission')).storeId
			this.get_list()
			this.get_notice()
		},
		activated() {

		},
		methods: {
			get_list() {
				var data = {
					storeId: this.storeId
				}
				this.dataApi.ajax('countStore', data, res => {
					if (res.responseType === 'S') {
						this.index_list = res
					}
				});
			},
			jump(){
				 this.$router.push('/mall/new_addgood/0')
			},
			get_notice() {
				//文章列表
				var data = {
					pageNum: this.pageNum,
					pageSize: 5,
					sort: 'CRE_TIME',
					desc: 'DESC'
				}
				this.dataApi.ajax('selectPageSysNotice', data, res => {
					if (res.responseType === 'S') {
						this.notice_list = res
						// console.log(this.notice_list, '123123')
					}
				});
			},
			get_notice_list(item) {
				//单个文章详情数据
				this.tankuang=true
				//文章详情
				var data = {
					noticeCode: item.noticeCode
				}
				this.dataApi.ajax('singleSysNotice', data, res => {
					if (res.responseType === 'S') {
						this.notice_xq = res
						  $("#content").html(this.notice_xq.content);
						// console.log(this.notice_xq)
					}
				});
			},
			close_click(){
				this.tankuang=false
			},
			handleCurrentChange(val) {
				this.pageNum = val
				this.get_notice()
				console.log(this.pageNum, 'pageNum')
				// this.fetchData2(val)
			},

		}

	}
</script>
